<!DOCTYPE html>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="../common.jsp"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html lang="en">
    <head>        
    	<base href="<%=basePath%>">
        <!-- META SECTION -->
        <title>${htmlTitle}</title>            
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        
        <link rel="icon" href="favicon.ico" type="image/x-icon" />
        <!-- END META SECTION -->
        
        <!-- CSS INCLUDE -->        
        <link rel="stylesheet" type="text/css" id="theme" href="static/css/theme-default.css"/>
        <!-- EOF CSS INCLUDE -->      
        
        <link href="static/css/style.css" rel="stylesheet" type="text/css" media="all" />
		<link rel="stylesheet" href="static/css/jquery/lrtk.css" type="text/css" media="" />



		<script src="static/js/jquery/mosaic.1.0.1.js"></script>
		<script src="static/js/jquery/lrtk.js"></script>                              
    </head>
    <body>
    
    	<%@include file="../header.jsp"%>
    
        <!-- START PAGE CONTAINER -->
        <div class="page-container">
            
            <!-- START PAGE SIDEBAR -->
            	<%@include file="../left.jsp"%>
            <!-- END PAGE SIDEBAR -->
            
            <!-- PAGE CONTENT -->
            <div class="page-content">

                <!-- START BREADCRUMB -->
                <!-- END BREADCRUMB -->                       
                
                <!-- PAGE CONTENT WRAPPER -->
                <div class="page-content-wrap">
					<div class="row">
						<div class="col-md-12" style="padding-top: 10px;">
							<!-- START SEARCH -->
							<div class="panel panel-default">
								<div class="panel-body">
									<div class="col-md-12" style="padding-left: 0px;">
										<div class="col-md-3">
											<div class="pull-left" style="line-height:30px;">员工姓名</div>
	                                		<div class="input-group" >
	                                           	<div class="input-group-btn">
	                                                 <input id="name" type="text" class="form-control" value=""/>                                      
	                                            </div>
		                                    </div>
										</div>
										<div class="col-md-3">
											<div class="pull-left" style="line-height:30px;">用户名</div>
	                                		<div class="input-group" >
	                                           	<div class="input-group-btn">
	                                                 <input id="account" type="text" class="form-control" value=""/>                                      
	                                            </div>
		                                    </div>
										</div>
										<div class="col-md-3" >
											<button class="btn btn-primary" onclick="search()">
												<span class="fa"></span>查询
											</button>
											<button class="btn btn-primary" onclick="clearCondition()">
												<span class="fa"></span>清空
											</button>
				                            <button class="btn btn-primary" onclick="add()">
				                            	<span class="fa"></span>添加
				                            </button>
										</div>
									</div>
								</div>
							</div>
							<!-- END SEARCH -->
							
							<!-- START SEARCH RESULT -->
							<div class="search-results">
								<!-- START DEFAULT DATATABLE -->
								<div class="panel panel-default">
									<div class="panel-body">
										<table id="tableList" class="table table-hover "
											cellspacing="0" width="100%">
											<thead>
												<tr>
													<th style="width: 10%">
														员工姓名
													</th>
													<th style="width: 10%">
														用户名
													</th>
													<th style="width: 10%">
														创建时间
													</th>
													<th style="width: 10%">
														操作
													</th>
												</tr>
											</thead>
										</table>
									</div>
								</div>
								<!-- END DEFAULT DATATABLE -->
							</div>
						</div>
					</div>
                </div>
                <!-- END PAGE CONTENT WRAPPER -->                                
            </div>            
            <!-- END PAGE CONTENT -->
        </div>
        <!-- END PAGE CONTAINER -->
        
        <!-- Modal -->
		<div class="modal fade" id="userModal" tabindex="-1" role="dialog" aria-labelledby="userModalLabel" aria-hidden="true">
		    <div class="modal-dialog">
		        <div class="modal-content">
		            <div class="modal-header">
		                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
		                        aria-hidden="true">&times;</span></button>
		                <h4 class="modal-title" id="userModalLabel">添加员工</h4>
		            </div>
		            <div class="modal-body">
                		<form id="jvalidate" class="form-horizontal" role="form">                                    
                                  <div class="form-group">
                                      <label class="col-md-2 control-label">员工姓名</label>
                                      <div class="col-md-10">
                                      	  <input id="adminUserId" type="hidden" class="form-control" />
                                          <input id="userName" name="userName" type="text" class="form-control" placeholder="请输入员工姓名"/>
                                      </div>
                                  </div>
                                  <div class="form-group">
                                      <label class="col-md-2 control-label">用户名</label>
                                      <div class="col-md-10">
                                          <input id="userAccount" name="userAccount" type="text" class="form-control" placeholder="请输入用户名"/>
                                      </div>
                                  </div>
                                  <div class="form-group">
                                      <label class="col-md-2 control-label">授予角色</label>
                                      <div class="col-md-10">                                        
                                          <select id="role" name="role" class="form-control select">
                                          		<%=request.getAttribute("options")%>
                                          </select>
                                      </div>
                                  </div>
                              </form>
		            </div>
		            <div class="modal-footer">
		                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
		                <button type="button" class="btn btn-primary" id="save" onclick="saveOrUpdate()">保存</button>
		            </div>
		        </div>
		    </div>
		</div>
        
        <script type="text/javascript">
        	var table;
        	$(document).ready(function() {
        		queryList();
        		initRoleOptions();
			});
        	
        	function initRoleOptions() {
        		var url = ctx + '/system/queryRoleOptions';
				$.ajax(url, {
				    type: 'post',
				    data: {},
				    success: function(result){
				    	var rtn = JSON.parse(result);
				    	if (rtn.code==1) {
				    		$("#role").html(rtn.options);
					    	$('#role').selectpicker('refresh');
				    	} else {
				    		
				    	}
				    }
				});
        	}
        	
        	function search()
		 	{
		 		table.ajax.reload();
		 	}
        	
        	function queryList() {
        		table = $('#tableList').DataTable({
					processing :true,
					serverSide :true,
					bSort :false,
					bFilter :false, //过滤功能
					bAutoWidth: false,//自动宽度
					ajax : {
						"url" :ctx + "/system/queryAdminUserList",
						"type" :"POST",
						"data": function(d){
						    return $.extend({}, d, {
						    	"name": $("#name").val(),
						    	"account": $("#account").val()
						      });
						    }
					},
					columns : [
							{
								"data" :"name"
							}, {
								"data" :"account"
							}, {
								"data" :"createdTime"
							}, {
								"mDataProp": null 
							}
						],
					columnDefs: [
									{
									    targets: 3,
									    render: function (a, b, c, d) {
									        return "<a  class=\"btn btn-success actionBtn\" href=\"javascript:void(0)\" onclick=\"edit(\'" + c.id + "\',\'" + c.name + "\',\'" + c.account + "\',\'" + c.roleId + "\')\">  <i class=\"fa fa-edit icon-white\"></i>编辑 </a>";
									    }
									}
					             ],
					"language" : {
						"lengthMenu" :"_MENU_ 条记录每页",
						"zeroRecords" :"没有找到记录",
						"info" :"第 _PAGE_ 页 ( 总共 _PAGES_ 页 )",
						"infoEmpty" :"无记录",
						"infoFiltered" :"(从 _MAX_ 条记录过滤)",
						"paginate" : {
							 "first":"首页",  
							 "last":"末页",     
							"previous" :"上一页",
							"next" :"下一页"
						}
					},
					"sPaginationType": "full_numbers"
				});
        	}
        	
        	function clearCondition()
		 	{
        		$("#name").val("");
        		$("#account").val("");
		 	}
        	
        	function clear() {
        		$("#adminUserId").val("");
        		$("#userName").val("");
        		$("#userAccount").val("");
        		$("#role").val("");
        		$('#role').selectpicker('refresh');
        	}
        	
		 	function add()
		 	{
		 		clear();
      			$("#userModalLabel").html("添加员工");
		 		$("#userModal").modal("show");
		 	}
		 	
		 	function edit(id, name, account, roleId) {
		 		$("#adminUserId").val(id);
		 		$("#userName").val(name);
        		$("#userAccount").val(account);
        		$("#role").val(roleId);
        		$('#role').selectpicker('refresh');
		 		$("#userModalLabel").html("编辑员工");
		 		$("#userModal").modal("show");
		 	}
		 	
		 	function saveOrUpdate()
		    {
		    	var adminUserId = $("#adminUserId").val();
		    	var userName = $("#userName").val();
		    	var userAccount = $("#userAccount").val();
		    	var roleId = $("#role").find("option:selected").val();
		    	var url = ctx + "/system/saveOrUpdateAdminUser";
		    	$.post(
		    	 	url,
		    	 	{ 
		    	 		"adminUserId": adminUserId,
		                "userName": userName,
		                "userAccount": userAccount,
		                "roleId": roleId
		    	 	},
		    	 	function(result){
		    	 		var rtn = JSON.parse(result);
		            	if(rtn.code == 1)
		            	{
		            		table.ajax.reload();
		                	$("#userModal").modal("hide");
		            	} else {
		            		$("#message-box-sound").addClass("open");
							$("#errText").html(rtn.text);
		            	}
		    	 	}
		    	 );
		    }
        </script>
        
    </body>
</html>